﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果 —— www.zhinengshe.com 智能社</title>
<link rel="stylesheet" type="text/css" href="zns_style.css">
<script type="text/javascript" src="move.js?" + new Date()></script>
<script>
	function getByClass(oParent, sClass)
	{
		 var aEle = oParent.getElementsByTagName('*');
			var aResult = [];
			
			for(var i=0;i<aEle.length;i++)
			{
				if(aEle[i].className==sClass)
					{
						aResult.push(aEle[i]);
					}
			}
		
			return aResult;
	}

	window.onload = function()
	{
		var oDiv = document.getElementById('playimages');
		var oBtnPrev= getByClass(oDiv,'prev')[0];
		var oBtnNext= getByClass(oDiv,'next')[0];
		var oMarkLeft = getByClass(oDiv,'mark_left')[0];
		var oMarkRight = getByClass(oDiv,'mark_right')[0];
		
		var oDivSmall = getByClass(oDiv,'small_pic')[0];
		var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
		var aLiSmall = oDivSmall.getElementsByTagName('li');
		
		var oUlBig = getByClass(oDiv,'big_pic')[0];
		var aLiBig = oUlBig.getElementsByTagName('li');
		
		var nowZIndex = 2 ;
		var now = 0;
		
		oUlSmall.style.width = aLiSmall.length * aLiSmall[0].offsetWidth + 'px';
		
		//左右按钮
		oBtnPrev.onmouseover =oMarkLeft.onmouseover =function()
		{
				startMove(oBtnPrev,'opacity',100);
		};
		
		oBtnPrev.onmouseout= oMarkLeft.onmouseout =function()
		{
				startMove(oBtnPrev,'opacity',0);
		};
		oBtnNext.onmouseover = oMarkRight.onmouseover =function()
		{
				startMove(oBtnNext,'opacity',100);
		};
		
		oBtnNext.onmouseout =oMarkRight.onmouseout =function()
		{
				startMove(oBtnNext,'opacity',0);
		};
		
		//切换图片
		for(var i=0;i<aLiSmall.length;i++)
		{
				aLiSmall[i].index = i;
				aLiSmall[i].onclick = function()
				{
						if(this.index ==now) return;
						now = this.index;
					
					 tab();
				};
			
			aLiSmall[i].onmouseover=function()
			{
					startMove(this,'opacity',100);
			};
			
			aLiSmall[i].onmouseout=function()
			{
				if(this.index!=now)
				{
						startMove(this,'opacity',60);
				}
			};
			
		}
		
		function tab()
		{
				aLiBig[now].style.zIndex = nowZIndex++;

				for(var j=0;j<aLiSmall.length;j++)
				{
						startMove(aLiSmall[j],'opacity',60);
				}

				startMove(aLiSmall[now],'opacity',100);

				aLiBig[now].style.height = 0;
				//alert(aLiBig[this.index].style.zIndex);
				startMove(	aLiBig[now],'height',320);
			
			//滚动下面的小图
			if(now==0)
				{
					startMove(oUlSmall,'left',0);
				}
			else if(now==aLiSmall.length-1)
				{
					startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
				}else{
							startMove(oUlSmall, 'left',-(now-1)*aLiSmall[0].offsetWidth);
				}
			
		}
		
		oBtnPrev.onclick = function()
		{
				now--;
			if(now <0)
			{
				now=aLiSmall.length-1;
			}
			tab();
		};
		
		oBtnNext.onclick = function()
		{
			now++;
			if(now ==aLiSmall.length)
			{
				now=0;
			}
			tab();
		};
		
		var timer = setInterval(oBtnNext.onclick ,2000);
		
		oDiv.onmouseover = function()
		{
			 clearInterval(timer);
		};
		
		oDiv.onmouseout = function()
		{
			timer = setInterval(oBtnNext.onclick ,2000);
		};
		
	};
</script>
</head>

<body>
<div id="playimages" class="play">
    <ul class="big_pic">

		<div class="prev"></div>
		<div class="next"></div>

		<div class="text">加载图片说明……</div>
		<div class="length">计算图片数量……</div>
		
		<a class="mark_left" href="javascript:;"></a>
		<a class="mark_right" href="javascript:;"></a>
		<div class="bg"></div>
		
        <li style="z-index:1;"><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
        <li><img src="images/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
    </div>
</div>

</body>
</html>
